<!DOCTYPE html>
<html>
<head>
    <title>欢迎来到小浣熊之家</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <style>
        :root {
            --raccoon-brown: #6d4c41;
            --raccoon-orange: #ff9800;
            --raccoon-tan: #d7ccc8;
        }
        body {
            font-family: 'Comic Sans MS', cursive;
            margin: 0;
            min-height: 100vh;
            background: linear-gradient(135deg, var(--raccoon-tan) 0%, #fff5f5 100%);
            position: relative;
            overflow: auto;
            padding: 20px;
        }
        .tree-hole {
            width: 300px;
            height: 300px;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" fill="%236d4c41"/><circle cx="12" cy="12" r="3" fill="%23ff9800"/></svg>');
            background-size: contain;
            position: fixed;
            opacity: 0.1;
            animation: pulse 4s infinite;
            z-index: 0;
        }
        .welcome-container {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            z-index: 1;
            padding: 30px 20px;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 20px;
            box-shadow: 0 8px 20px rgba(0,0,0,0.1);
            border: 3px solid var(--raccoon-brown);
            width: 90%;
            max-width: 500px;
        }
        h1 {
            color: var(--raccoon-brown);
            margin: 0 0 15px 0;
            font-size: clamp(1.8rem, 4vw, 2.5rem);
            text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
            line-height: 1.3;
        }
        .start-btn {
            padding: 12px 35px;
            background: linear-gradient(145deg, var(--raccoon-brown) 0%, var(--raccoon-orange) 100%);
            color: white;
            border: none;
            border-radius: 30px;
            font-size: clamp(1rem, 3vw, 1.2rem);
            cursor: pointer;
            transition: all 0.3s;
            box-shadow: 0 4px 10px rgba(0,0,0,0.2);
            font-family: inherit;
            margin: 10px 0;
            width: 80%;
            max-width: 280px;
        }
        .info-bar {
            position: fixed;
            bottom: 15px;
            left: 15px;
            color: var(--raccoon-brown);
            background: rgba(255,255,255,0.9);
            padding: 8px 12px;
            border-radius: 12px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            z-index: 2;
            line-height: 1.6;
        }
        .info-row {
            display: flex;
            gap: 8px;
            align-items: baseline;
        }
        .info-label {
            font-size: 0.8rem;
            min-width: 60px;
            color: var(--raccoon-tan);
        }
        .info-value {
            font-size: 0.8rem;
            font-weight: bold;
            color: var(--raccoon-orange);
        }
        .pinecone {
            position: absolute;
            width: 30px;
            height: 30px;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 2a8 8 0 1 1 0 16 8 8 0 0 1 0-16zm-2.5 7.5a1.5 1.5 0 1 0 3 0 1.5 1.5 0 0 0-3 0zm0 5a1.5 1.5 0 1 0 3 0 1.5 1.5 0 0 0-3 0zm5 0a1.5 1.5 0 1 0 3 0 1.5 1.5 0 0 0-3 0z" fill="%236d4c41"/></svg>');
            animation: fall linear infinite;
            pointer-events: none;
        }
        @keyframes pulse {
            0% { transform: scale(0.95); }
            50% { transform: scale(1.05); }
            100% { transform: scale(0.95); }
        }
        @keyframes fall {
            0% { transform: translateY(-100vh) rotate(0deg); }
            100% { transform: translateY(100vh) rotate(360deg); }
        }
        @media (max-width: 480px) {
            .welcome-container {
                padding: 25px 15px;
            }
            h1 {
                font-size: 1.8rem;
            }
            .info-bar {
                padding: 8px 12px;
                left: 10px;
                bottom: 10px;
            }
            .info-row {
                gap: 5px;
            }
        }
    </style>
</head>
<body onload="createPinecones()">
    <div class="tree-hole"></div>
    
    <div class="welcome-container">
        <h1>欢迎来到小浣熊的树洞 🌰</h1>
        <button class="start-btn" onclick="location.href='main.html'">戳这里进入树洞 →</button>
        <p style="color: var(--raccoon-brown); margin-top: 15px; font-size: 0.9em;">
            小提示：准备好和浣熊伙伴一起玩耍了吗？
        </p>
    </div>
    
    <div class="info-bar">
        <div class="info-row">
            <span class="info-label">工作室：</span>
            <span class="info-value">兰帝裟</span>
            <span class="info-label">版本号：</span>
            <span class="info-value">v1.2.0</span>
            <span class="info-label">UID:</span>
            <span class="info-value">1001</span>
        </div>
    </div>
    
    <script>
        function createPinecones() {
            for(let i = 0; i < 8; i++) {
                const pinecone = document.createElement('div');
                pinecone.className = 'pinecone';
                pinecone.style.left = Math.random() * 100 + 'vw';
                pinecone.style.animationDuration = Math.random() * 3 + 2 + 's';
                pinecone.style.animationDelay = Math.random() * 2 + 's';
                document.body.appendChild(pinecone);
            }
        }
    </script>
</body>
</html>
